<template>
	<div class="tab">
		<div v-for="(item, index) in tabs" :key="index" class="subcon" @click="goToPage(item.path)">
			<img :src="currentTab == index ? require(`@/assets/icons/${item.select_icon}`) : require(`@/assets/icons/${item.icon}`)"
				:alt="item.text" />
			<label :style="currentTab == index ? 'color:#FF8002' :  'color:#989899' ">{{item.text}}</label>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'tab',
		data() {
			return {
				activeName: "first",
				tabs: [{
						icon: 'index_normal.png',
						select_icon: 'index_active.png',
						text: '首页',
						path: '/index'
					},
					{
						icon: 'sell_normal.png',
						select_icon: 'sell_active.png',
						text: '寄售',
						path: '/mails'
					},
					{
						icon: 'zixun_normal.png',
						select_icon: 'zixun_active.png',
						text: '看点',
						path: '/pages'
					},
					{
						icon: '消息.png',
						select_icon: '消息 (1).png',
						text: '消息',
						path: '/messages'
					},
					{
						icon: 'mine_normal.png',
						select_icon: 'mine_active.png',
						text: '我的',
						path: '/mine'
					}
				],
				currentTab: 0
			};
		},
		watch: {
			// 监听路由变化  
			'$route': {
				handler(to, from) {
					// to 和 from 都是路由对象，分别表示目标路由和来源路由  
					// 根据新的路由设置currentTab的值  
					if (to.path.includes("index") || to.path == "/") {
						this.currentTab = 0;
					} else if (to.path.includes("mails")) {
						this.currentTab = 1;
					} else if (to.path.includes("pages")) {
						this.currentTab = 2;
					} else if (to.path.includes("messages")) {
						this.currentTab = 3;
					} else if (to.path.includes("mine")) {
						this.currentTab = 4;
					}
				},
				// 深度观察，确保即使路由的参数变化也能触发handler  
				deep: true,
				// 立即执行一次handler，组件创建时  
				immediate: true
			}
		},
		methods: {
			goToPage(path) {
				this.$router.push(path);
			},
		}
	}
</script>
<style>
	.tab {
		bottom: 0px;
		width: 100%;
		position: fixed;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		background-color: #f5f5f7;
		padding-top: 1vw;
		z-index: 10;
	}

	.subcon img {
		width: 6vw;
		height: 6vw;
	}

	.subcon {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		text-align: center;
	}
</style>